<template>
  <div class="app-container">
    <!-- 固定导航回到首页 -->
    <a class="icon" href="#top" v-if="show">
      <span class="mui-icon-extra mui-icon-extra-top"></span>
    </a>

    <!-- 路由部分 -->
    <transition>
      <router-view></router-view>
    </transition>

    <!-- 底部模块 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
// 引入toast

// 引入底部模块
import tabbar from './compoents/subcompoents/tabbar.vue';
export default {
  data: function() {
    return {
      show: false
    };
  },
  created() {
    this.getPosition(); // 调用函数-0---- 获取屏幕高度----操作显示与影藏！
  },
  methods: {
    getPosition() {
      console.log("ok");
      // var  y = document.body.scrollTop;
      window.addEventListener("scroll", () => {
        var y = document.documentElement.scrollTop || document.body.scrollTop; // 获取屏幕的高度---- 这里需要做兼容操作！！！
        // console.log(y);  测试代码----
        if (y > 500) {
          // console.log("可以执了呀");    测试代码 -----
          this.show = true;
        } else {
          this.show = false;
        }
      });
    }
  },
  components:{
    tabbar
  }
};
</script>

<style lang="scss" scoped>
.app-container {
//   padding-bottom: 40px;
//   overflow-x: hidden;
  .icon {
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    background-color: rgba(248, 63, 171, 0.575);
    position: fixed;
    right: 20px;
    bottom: 110px;
    z-index: 9999;
    color: #444;
  }
}

</style>


